var iw; // original image width
var ih; // original image height
var fw; // frame width (=length)
var fh; // frame height (=length)
var topH; // frame top position
var leftW; // frame left position
var hlX; // -topH - 1 (used for highlight background positioning)
var hlY; // -leftW - 1 (used for highlight background positioning)
var startX; // initial x position before moving
var startY; // initial y position before moving
var deltaX; // distance, along x-axis, been moved
var deltaY; // distance, along y-axis, been moved

function photoCropInit(overlayId) {	
	iw = $('#'+overlayId+' .preview img').width();
	ih = $('#'+overlayId+' .preview img').height();
	$('#'+overlayId+' .overlay').css('width', iw).css('height', ih);
	$('#'+overlayId+' .preview').css('width', iw).css('height', ih);
	var xywh = $('#'+overlayId+' input').val();
	if(xywh != '') {
		var arr = xywh.split(',');
		fw = fh = parseInt(arr[2]);
		topH = parseInt(arr[1]);
		leftW = parseInt(arr[0]);
	} else {
		fw = fh = (iw>ih)? ih*0.9 : iw*0.9;
		topH = (ih - fh) / 2;
		leftW = (iw - fw) / 2;
	}
	var src = $('#'+overlayId+' .preview img').attr('src');
	hlX = -leftW-1; // -1 is added to accommodate the added border width
	hlY = -topH-1;
	$('#'+overlayId+' .highlight').css({
		backgroundImage: 'url('+src+')',
		backgroundPosition: hlX+"px "+hlY+"px",
		width: fw,
		height: fh,
		top: topH,
		left: leftW,
		cursor:'move'
	});
};

var photoCropResize = function(event, ui){
	$(this).css({backgroundPosition: hlX+1+"px "+hlY+"px"});
};

var photoCropResizeStop = function(event, ui){
	var w = $(this).css('width');
	var h = $(this).css('height');
	fw = parseInt(w.substring(0,w.indexOf('px')));
	fh = parseInt(h.substring(0,h.indexOf('px')));
};

var photoCropDragStart = function(event, ui){
	startX = event.pageX;
	startY = event.pageY;
};

var photoCropDrag = function(event, ui){
	deltaY = event.pageY-startY;
	deltaX = event.pageX-startX;
	// top delta limit
	if(topH+deltaY<=0) {
		deltaY=-topH;
	}
	// bottom delta limit
	if(topH+fw+deltaY+2>=ih) {
		deltaY=ih-topH-fw-2;
	}
	// right delta limit
	if(leftW+fh+deltaX+2>=iw) {
		deltaX=iw-leftW-fh-2;
	}
	// left delta limit
	if(leftW+deltaX<=0) {
		deltaX=-leftW;
	}	
	var bgX = hlX-deltaX;
	var bgY = hlY-deltaY;
	$(this).css({
		top:topH + deltaY, 
		left:leftW + deltaX,
		backgroundPosition: bgX+"px "+bgY+"px"
	});
};

var photoCropDragStop = function(event, ui){
	topH += deltaY;
	leftW += deltaX;
	hlX -= deltaX;
	hlY -= deltaY;
};

/*
$(document).ready(function() {
	//$('.button').button().css('cursor','pointer');
	
	var iw = $('.preview img').width();
	var ih = $('.preview img').height();
	$('.overlay').css('width', iw).css('height', ih);
	$('.preview').css('width', iw).css('height', ih);
	var length = (iw>ih)? ih*0.9 : iw*0.9;
	var fw = length;
	var fh = length;
	var topH = (ih - fh) / 2;
	var leftW = (iw - fw) / 2;
	var src = $('.preview img').attr('src');
	var hlX = -leftW-1; // -1 is added to accommodate the added border width
	var hlY = -topH-1;
	$('.highlight').css({
		backgroundImage: 'url('+src+')',
		backgroundPosition: hlX+"px "+hlY+"px",
		width: fw,
		height: fh,
		top: topH,
		left: leftW,
		cursor:'move'
	});
	
	$('.highlight').resizable({
		aspectRatio: 1,
		containment: '.preview',
		minHeight: 140,
		resize: function(event, ui) {
				$(this).css({backgroundPosition: hlX+1+"px "+hlY+"px"});
			},
		stop: function(event, ui) {
				var w = $(this).css('width');
				var h = $(this).css('height');
				fw = parseInt(w.substring(0,w.indexOf('px')));
				fh = parseInt(h.substring(0,h.indexOf('px')));
			}
	});	
	
	var startX;
	var startY;
	var deltaX;
	var deltaY;
	
	$('.highlight').bind( 'dragstart', function(event){
		startX = event.pageX;
		startY = event.pageY;
	});
	
	$('.highlight').bind( 'drag', function(event){
		deltaY = event.pageY-startY;
		deltaX = event.pageX-startX;
		// top delta limit
		if(topH+deltaY<0) {
			deltaY=-topH;
		}
		// bottom delta limit
		if(topH+fw+deltaY>ih) {
			deltaY=ih-topH-fw-1;
		}
		// right delta limit
		if(leftW+fh+deltaX>iw) {
			deltaX=iw-leftW-fh-1;
		}
		// left delta limit
		if(leftW+deltaX<0) {
			deltaX=-leftW;
		}
		var bgX = hlX-deltaX;
		var bgY = hlY-deltaY;
		$(this).css({
			top:topH + deltaY, 
			left:leftW + deltaX,
			backgroundPosition: bgX+"px "+bgY+"px"
		});		
	});
	
	$('.highlight').bind( 'dragend', function(event){
		topH += deltaY;
		leftW += deltaX;
		hlX -= deltaX;
		hlY -= deltaY;
	});
	
	// Save photo
	$('.profile-photo-save').click(function(event){
		location.href='profile-photo-save.action?x='+leftW+
			'&y='+topH+'&w='+fw+'&h='+fh+
			'&tempFilePaths='+$(this).attr('name');
	});

});
*/